<template>
  <t-card :bordered="false" shadow>
    <t-space class="w-full" direction="vertical">
      <t-form
        ref="form"
        labelAlign="top"
        :data="formData"
        @submit="handleOutputSubmit"
      >
        <t-row :gutter="[16, 16]">
          <t-col :span="4">
            <t-form-item label="编码格式" name="codec">
              <t-select v-model="formData.codec" :options="codedFormatOption" />
            </t-form-item>
          </t-col>
          <t-col :span="4">
            <t-form-item label="矫正" name="correct">
              <t-select v-model="formData.correct" :options="correctOption" />
            </t-form-item>
          </t-col>

          <t-col :span="4">
            <t-form-item label="分辨率" name="resolution">
              <t-select
                v-model="formData.resolution"
                :options="resolutionOption"
              />
            </t-form-item>
          </t-col>

          <t-col :span="6">
            <t-form-item label="编码质量" name="qp">
              <t-select v-model="formData.qp" :options="qpOption" />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <!-- 帧率 -->
            <t-form-item label="帧率" name="framerate">
              <t-slider
                class="w-full"
                v-model="formData.framerate"
                :min="1"
                :max="25"
                :show-tooltip="true"
                :input-number-props="{ theme: 'column' }"
              />
            </t-form-item>
          </t-col>

          <t-col :span="6"></t-col>
        </t-row>
      </t-form>

      <div class="flex justify-end">
        <t-space>
          <t-button @click="handleOutputSubmit">应用</t-button>
        </t-space>
      </div>
    </t-space>
  </t-card>
</template>

<script setup>
import { ref } from "vue";
import { setOutCfg, getOutCfg } from "@/api/common";

// 获取输出配置
const getOutCfgData = async () => {
  const res = await getOutCfg();
  const data = res?.data || {};
  console.log("data: ", data);
  for (const key in data) {
    if (data.hasOwnProperty.call(data, key)) {
      const value = data[key];
      if (key === "qp") {
        if (value <= 20) {
          formData.value[key] = 0;
        } else if (value <= 25) {
          formData.value[key] = 1;
        } else if (value <= 30) {
          formData.value[key] = 2;
        }
      } else {
        formData.value[key] = value;
      }
    }
  }
  console.log(" formData.value: ", formData.value);
};

getOutCfgData();

const formData = ref({
  codec: 0, // 编码格式 0-H264  1-H265
  qp: 0, // 编码质量 0-一般 20 1-良好 25  2-优秀 28
  resolution: 0, // 分辨率 0-720p  1-1080p  2-4k
  framerate: 0, // 帧率 范围 1-25
  correct: 0, // 矫正 0-关闭  1-开启
});

// 编码格式配置
const codedFormatOption = [
  { label: "H264", value: 0 },
  { label: "H265", lalue: 1 },
];

// 分辨率配置
const resolutionOption = [
  { label: "720p", value: 0 },
  { label: "1080p", value: 1 },
  { label: "4k", value: 2 },
];

// 矫正配置
const correctOption = [
  { label: "关闭", value: 0 },
  { label: "开启", value: 1 },
];

// 编码质量 一般 良好 优秀
const qpOption = [
  { label: "一般", value: 0 },
  { label: "良好", value: 1 },
  { label: "优秀", value: 2 },
];

const handleOutputSubmit = async () => {
  const params = { ...formData.value };
  if (params.qp === 0) {
    params.qp = 20;
  } else if (params.qp === 1) {
    params.qp = 25;
  } else if (params.qp === 2) {
    params.qp = 28;
  }

  await setOutCfg(JSON.stringify(params));
};
</script>

<style scoped></style>
